import router from './router'
import store from '@/store'

// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'// 这个是封装的文字

const whiteList = ['/login', '/404']

// 全局守卫
// 基础的权限拦截
// 登入状态下，不能手动切换到/login页面，如果切换强制回到/首页
// 未登入状态下，只能去/login页面（白名单）其他页面不能跳转

// 全局前置守卫（只要路由发生跳转就先执行这里，在跳转页面之前）
router.beforeEach(async(to, from, next) => {
  // 显示进度条效果
  NProgress.start()
  const token = store.getters.token// 获取token
  // 判断如果有token
  if (token) { // 表示登入
    if (to.path === '/login') {
      // 如果登入了有token还想跳转到登入页直接给他强制跳转到主页
      next('/')
      NProgress.done()// 重定向，就会导致上一次路由终端，启动的进度条需要手动关闭
      // 重定向会导致路由守卫再次执行，在开启一个进度条，跳转后关闭
    } else {
      // 判断
      // 如果没有用户名字，现请求等待成功，放行页面next（）
      // 如果有名字if进不去，也要走next（）放行页面
      // 为何加await
      // await等待：等待后面用户信息保存到vuex，在next（）跳转页面，就能直接看到用户名
      // 如果不加，异步去请求，主线程代码先往下next（）跳转页面，页面上没有名字，异步请求数据完成vuex值变量华
      // 响应式更新所有使用vuexi相关的变量 ----从没有名字-----有名字显示
      // 登入了不强制跳转直接放行
      next()
      if (!store.getters.name) {
        await store.dispatch('user/getUserInfoActions')
      }
    }
  } else {
    // 如果没登入的话，只能去这两个白名单，给他放行
    // if (to.path === '/login' || to.path === '/404')这是复杂写法
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 表示没有token想任意跳转是不行的
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  // 网址抬头文字
  // 网页切换完毕，在设置当前切换完毕的这个页面标题
  console.log(to)// 运行时的路由对象信息，包含路由规则数组里的对象
  // console.log(to)
  document.title = getPageTitle(to.meta.title)

  getPageTitle
  // 隐藏进度条效果
  NProgress.done()
})
